
<template>
  <div class="table-sty box-shadow">
    <div class="tabpane topcolor flexb othertop">
      <div class="flex">
        <a v-for="item in menu" :key="item.value"
        @click="handleMenuActive(item.value)"
        style="background: #f3f3f3; margin-right: -10px;"
        class="blackBack"
        :class="{ 'active': item.value === active }">
          {{$t(`jy.${item.name}`)}}
        </a>
        <div style="font-size: 12px; margin-top: -3px;" v-if="userLogin && !embed">（{{$t('order.onlyShow3Months')}}
          <span class="toOrderBtn" @click="$router.push('/my-order?way=history')">{{$t('order.seeOrder')}}</span>）
        </div>
        <!-- <div class="ml10">
          <el-select v-model="formData.historyType"
          :placeholder="$t('order.inputChoose')"
          @change="handleSearchData"
          class="selectWidth"
          size="small"
          style="width: 185px;">
            <el-option
              v-for="item in historyTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              style="font-size: 12px;">
            </el-option>
          </el-select>
        </div> -->
      </div>
      <div class="pr">
        <div class="unReadOrder" v-if="unReadCount" @click="handleUpdateOrderIsReaded">
          <i class="iconfont icon-huaban1"></i>
          <span class="redDot"></span>
        </div>
        <el-checkbox @change="handleSearchData"
        v-model="formData.hidRevokeOrder">{{$t('jy.hideRevokeOrder')}}</el-checkbox>
        <el-checkbox v-model="formData.hidOtherKey" v-if="symbolListIsOpen">{{$t('jy.ycother')}}</el-checkbox>
        <a class="shuaxin" v-if="userLogin"
        :class="{'act' : refresh}" @click="handleRefresh"><i class="el-icon-refresh"></i></a>
      </div>
    </div>
    <orders-history :form-dataget="formData" @ListenHistoryOrder="ListenHistoryOrder" :embed="embed"/>
    <!-- <div class="tableCont">
      <div class="tableTip" v-if="userLogin && !embed">（{{$t('order.onlyShow3Months')}}
        <span class="toOrderBtn" @click="$router.push('/my-order?way=history')">{{$t('order.seeOrder')}}</span>）
      </div>
    </div> -->
  </div>
</template>

<script>
import { getUrlParams } from '@/utils/validate';
import OrdersHistory from '@/components/orders/History';

export default {
  name: 'trading-bottom-history',
  components: {
    OrdersHistory
  },
  data() {
    return {
      refresh: false,
      active: 0,
      unReadCount: 0, // 当前委托未读订单个数
      userLogin: false,
      menu: [
        {
          name: 'lsweituo',
          value: 0
        }
      ],
      formData: {
        currPage: 1, // 当前页码
        pageSize: 10,
        coinCode: '', // 币种Id
        direction: '', // 方向
        status: '', // 选中值
        orderStatus: '', // 订单状态
        orderByName: 'update_ts',
        orderByType: 'desc',
        valuationCoinCode: 0, // 币种类型
        dealStatus: '', // 成交状态
        historyType: 0, // 历史订单类型：0-近3个月订单；1-2018年订单；2-2019年订单
        hidOtherKey: false, // 隐藏其他交易对
        hideCancelOrder: 1, // 隐藏已撤销订单
        hidRevokeOrder: true, // 隐藏已撤销订单
        symbolId: null, // 交易对id
        beginDate: '', // 开始时间
        endDate: '', // 结束时间
        timerBlance: true, // 余额获取开/关
      },
      symbolListIsOpen: true,
      // 订单时间
      // historyTypeList: [
      //   {
      //     value: 2,
      //     label: this.$t('order.order2019'), // 2019年
      //   },
      //   {
      //     value: 1,
      //     label: this.$t('order.order2018'), // 2018年
      //   },
      // ],
    };
  },
  props: {
    embed: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    '$store.state.app.trade': function change() {
      this.tradByVuex = this.$store.state.app.trade;
    },
    'formData.hidOtherKey': function change(val) {
      if (val) {
        this.formData.hidOtherKey = val;
        this.formData.symbolId = this.tradByVuex.id;
        this.handleSearchData();
        return;
      }
      this.formData.symbolId = '';
      this.handleSearchData();
    },
    '$store.state.app.scatter.identity': {
      handler: function listen(val) {
        if (val) {
          this.userLogin = true;
          this.handleProcessingUnreadOrder();
          return
        }
        this.unReadCount = 0;
        this.userLogin = false;
      },
      deep: true,
    },
    // '$store.state.app.language': function change() {
    //   this.historyTypeList = [
    //     {
    //       value: 0,
    //       label: this.$t('order.nearlyOrder'), // 近3个月
    //     },
    //     {
    //       value: 2,
    //       label: this.$t('order.order2019'), // 2019年
    //     },
    //     {
    //       value: 1,
    //       label: this.$t('order.order2018'), // 2018年
    //     },
    //   ]
    // }
  },
  created() {
  },
  mounted() {
    this.handleProcessingUnreadOrder();
    // 当前交易对
    this.tradByVuex = this.$store.state.app.trade;
    const sapp = this.$store.state.app;
    if (sapp.scatter && sapp.scatter.identity) {
      this.userLogin = true;
    }
    // 未读订单数
    this.unReadCount = this.$store.state.app.badge;
    if (this.embed) {
      const paUrl = getUrlParams(window.location.href);
      if (paUrl && paUrl.symbols === '0') {
        this.symbolListIsOpen = false;
        this.formData.hidOtherKey = true;
      }
    }
  },
  beforeDestroy() {
  },
  methods: {
    // 菜单切换
    handleMenuActive(value) {
      this.active = value;
    },
    // 刷新
    handleRefresh() {
      if (this.refresh) return;
      this.refresh = true;
      this.handleSearchData();
      setTimeout(() => {
        this.refresh = false;
      }, 500);
    },
    // 更新传递
    handleSearchData() {
      this.$set(this.formData, 'timerUpdate', new Date().getTime());
    },
    // 获取历史委托个数
    handleProcessingUnreadOrder() {
      this.$http.get('/order/getHistoryUnReadCount').then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.unReadCount = res.unReadCount;
      });
    },
    // 更新历史委托为已读状态
    handleUpdateOrderIsReaded() {
      this.$http.get('/order/updateHistoryOrderIsReaded').then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.unReadCount = 0;
        this.$set(this.formData, 'timerUpdate', new Date().getTime());
      });
    },
    // 监听当前订单
    ListenHistoryOrder(key) {
      // 更新订单扫把
      if (key === 'order' || key === 'orderUpdate') {
        this.handleProcessingUnreadOrder();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.disablebtn {
  cursor: no-drop;
}

.topcolor {
  background: $-topcolorf7;
}

.trbtable {
  background: #fff;
}

.revokeAll {
  display:inline-block;
  color: #278EDA;
  margin-right: 10px;
  font-size: 12px;
  cursor: pointer;
  i {
    font-size: 12px;
    margin-right: 4px;
  }
}
.shuaxin {
  display: inline-block;
  margin: 0;
  font-size: 14px;
  padding: 0px 5px;

  &.act i{
    animation: rotating 1s linear infinite;
  }
}

.wordWrap{
  word-wrap: break-word;
  word-break: normal;
}
.unReadOrder {
  display: inline-block;
  cursor: pointer;
  margin-right: 10px;
  .redDot {
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #E51C23;
    border-radius: 50%;
    margin-bottom: 2px;
  }
}
.toOrderBtn {
  cursor: pointer;
  color: #278EDA;
}
.colorNum {
  color: #999;
}

.tableCont {
  position: relative;
  padding-bottom: 30px;
  .tableTip {
    position: absolute;
    bottom: 5px;
    left: 3px;
    font-size: 12px;
    margin-top: -3px;
    width: 1254px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    z-index: 10;
  }
}
.theme-278EDA {
  .cell {
    span {
      color: #333;
    }
  }
}
.theme-1B1D27 {
  .topcolor {
    background: $-topcolor2;
  }
  .symbolCoinCode {
    .symbolCoin {
      color: #7b8db9 !important;
      &:hover {
        font-weight: bold;
      }
    }
  }
  .trbtable {
    background: $-black1;
    /deep/ .cell {
      color: rgba(255, 255, 255, 0.6);
    }
  }
  .blackBack {
    background: #152247 !important;
  }
  .tableCont {
    .tableTip {
      background: #152247 !important;
    }
  }
}
.tabpane /deep/.el-checkbox__label {
  color: #666;
  font-size: 12px;
}
</style>
